<script setup lang="ts">
import { ElDropdown, ElButton, ElDropdownItem } from 'element-plus';
import { computed, DefineComponent, unref } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue'
import LinkButton from './LinkButton.vue';
import { useSystemInfo } from '@/store';
import { AcintionType, TableActionItems } from './types'

interface TableActionProps<T = any> {
  // 按钮风格
  actionType?: AcintionType,
  actions: TableActionItems<T>[],
  callParams: T,
}
const props = withDefaults(defineProps<TableActionProps>(), {
  actionType: 'button',
  actions: () => [],
})
const systemInfo = useSystemInfo()
const LinkType = computed(() => props.actionType === 'link')
const ButtonType = computed(() => props.actionType === 'button')
// 判断条件包括 不是假值,有权限,判断可见
const FilterdActions = computed(() => {
  const configs = props.actions.filter(Boolean);
  const permissions = configs.filter(i => {
    if (!i.permission || systemInfo.userInfo.adminType === 1) { return true }
    return (Array.isArray(i.permission)) ? i.permission.every(i => systemInfo.PowerButtons.has(i)) : systemInfo.PowerButtons.has(i.permission)
  })
  return permissions.filter(i => (i.show) ? i.show(props.callParams) : true)
})

const ViewActions = computed(() => {
  const TFA = unref(FilterdActions)
  if (TFA.length <= 3) { return TFA }
  const FFContent = TFA.slice(0, 2)
  return FFContent
})
const foldContent = computed(() => {
  const TFA = unref(FilterdActions)
  if (TFA.length <= 3) { return null }
  const FFContent = TFA.slice(2)
  return FFContent
})
</script>
<template>
  <div class="table-actions-wrapper">
    <LinkButton v-for="item of ViewActions" :link-mode="LinkType" :call-params="callParams" :meta-info="item">
      {{ typeof item.textContent === 'string' ? item.textContent : item.textContent(callParams) }}</LinkButton>
    <ElDropdown v-if="foldContent">
      <LinkButton :link-mode="LinkType" class="actions-more">更多<el-icon class="el-icon--right">
          <ArrowDown />
        </el-icon>
      </LinkButton>
      <template #dropdown v-if="foldContent">
        <ElDropdownMenu>
          <ElDropdownItem :key="item.key" v-for="item of foldContent" @click="() => item.call(callParams)">
            {{ typeof item.textContent === 'string' ? item.textContent : item.textContent(callParams) }}
          </ElDropdownItem>
        </ElDropdownMenu>
      </template>
    </ElDropdown>
  </div>
</template>
<style >
.table-actions-wrapper .actions-more {
  cursor: pointer;
}

.table-actions-wrapper .el-link__inner{
  line-height: 1;
}
.table-actions-wrapper {
  display: flex;
  justify-content: flex-start;
  gap: .5em;
  align-items: center;
}
</style>